<template>
    <el-dialog 
        class="dialog" 
        v-model="dialogVisible" 
        width="90%" 
        @opened="handleOpened" 
        @close="close"
    >
    <template #header="{ close, titleId, titleClass }">
      <div class="btns">
        <div class="btn active">地图</div>
      </div>
    </template>
        <div class="content">
            <Map v-if="show" />
        </div>
    </el-dialog>
</template>

<script setup>
import Map from '@/views/map/index.vue';
import { ref } from 'vue';

const dialogVisible = ref(false);
const show = ref(false);

const open = () => {
    dialogVisible.value = true;
}

const handleOpened = () => {
    show.value = true; // 弹窗完全打开后再渲染地图
}

const close = () => {
    dialogVisible.value = false;
    show.value = false; // 关闭时重置状态
}

defineExpose({ open, close });
</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 60vh; /* 根据实际需求调整高度 */
}
</style>